<template>
  <div class="survey">
    <!-- 背景 -->
    <image class="bg" src="https://ustatic.hudongmiao.com/joymew-hostline/survey-bg.png"></image>
    <uni-nav-bar title="婚礼问卷" statusBar="true" :border="false" backgroundColor="#00000000"></uni-nav-bar>
    <!-- 模板问卷 -->
    <div class="template-survey">
      <questionnaire-template-card v-for="(template, index) in questionnaireTemplateList" :id="template.id" :index="index"
        :title="template.title" :categoryQuestionList="template.categoryQuestionList"
        :key="template.id"></questionnaire-template-card>
    </div>
    <my-survey-component></my-survey-component>
  </div>
</template>

<script lang="ts" setup>
import MySurveyComponent from '@/components/my-survey-component.vue';
import QuestionnaireTemplateCard from '@/components/questionnaire-template-card.vue';

import { useQuestionnaireList } from '@/stores/questionnaire-list';
import { useUser } from '@/stores/user-store';
import { shareQuestionnaire } from '@/utils/others';
import { getLocalToken } from '@/utils/token';
import { onPullDownRefresh, onShareAppMessage, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';

const questionnaireListStore = useQuestionnaireList()
const { questionnaireTemplateList } = storeToRefs(questionnaireListStore)
const { resetQuestionnaireList, getQuestionnaireList } = questionnaireListStore

const userStore = useUser()
const { userInfo } = storeToRefs(userStore)

/** 分享动作回调 */
onShareAppMessage((res) => {
  return shareQuestionnaire(res, userInfo.value.name, userInfo.value.id)
})

// 挂载后获取问卷模板
onShow(async () => {
  // XXX 暂时延迟获取问卷模板，等待静默登录完成
  setTimeout(async () => {
    // 重置问卷模板
    questionnaireListStore.resetQuestionnaireList('template')
    await questionnaireListStore.getQuestionnaireList('template')
  }, 500)
})

// 下拉刷新时，重新问卷模板
onPullDownRefresh(async () => {
  console.log('下拉刷新', getLocalToken())
  // 重置问卷模板
  resetQuestionnaireList('template')
  // 获取问卷模板
  await getQuestionnaireList('template')
})
</script>

<style lang="scss" scoped>
.survey {
  width: 100vw;

  display: flex;
  flex-direction: column;

  position: relative;

  // 背景
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    width: 100vw;
    height: 216.4103vw;
  }

  // 模板问卷
  .template-survey {
    margin-top: 7.9976px;
    margin-bottom: 46.15rpx;

    padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 47.6923vw;
    grid-gap: 10px 0px;
    justify-items: center;
  }
}
</style>
